<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>合肥市人民政府网图片无缝滚动效果</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			ul,
			li {
				list-style: none;
				display: block;
			}

			#scrollBox {
				background: #FFF;
				margin-top: 40px;
				margin-left: 143px;
				overflow: hidden;
				border: 0;
				width: 1040px;
			}

			#scrollBox #con1,
			#scrollBox #con2 {
				float: left;
				margin-left: 10px;
				margin-top: 10px;
				margin-bottom: 5px;
			}

			#innerdiv {
				float: left;
				width: 800%;
			}

			img {
				margin-left: 10px;
				height: 60px;
				width: 193px;
			}

			body {
				background-color: #f3f3f3;
			}
		</style>
	</head>
	<body>
		<div id="scrollBox">
			<div id="innerdiv">
				<div id="con1" onmouseover="stop()" onmouseout="goOn()">
					<a href="#"><img src="1.png" ></a>
					<a href="#"><img src="2.jpg" ></a>
					<a href="#"><img src="3.jpg" ></a>
					<a href="#"><img src="4.png" ></a>
					<a href="#"><img src="1.png" ></a>
					<a href="#"><img src="2.jpg" ></a>
				</div>
				<div id="con2" ></div>
			</div>
		</div>
		<script type="text/javascript">
			var area = document.getElementById('scrollBox');
			var con1 = document.getElementById('con1');
			var con2 = document.getElementById('con2');
			con2.innerHTML = con1.innerHTML;
			area.scrollLeft = 0;

			function scrollUp() {
				if (area.scrollLeft >= con2.offsetWidth){
					area.scrollLeft = 0;
				} else {
					area.scrollLeft++;
				}
			}
			var time = 10;
			var mytimer = setInterval(scrollUp, time);

			function stop() {
				clearInterval(mytimer);
			}

			function goOn() {
				mytimer = setInterval(scrollUp, time);
			}
		</script>
	</body>
</html>